<template>
	<view>
		<view class="content"></view>
		<view class="mainpadding">
			<view class="mainpadding" style="padding-top: 250rpx;">
				<view class="fonweight baixian" style="font-size: 80rpx;color: #33d5a6;">查询排名</view>
				<view class="mainpadding radius margin_top6" style="background-color: rgba(255, 255, 255, .6);">
					<view class="mainpadding radius " style="background-color: rgba(51, 213, 166,.1);">
						<input type="number" placeholder="请输入手机号" style="color: #33d5a6; font-size: 40rpx;"
							placeholder-style="color: #33d5a6; font-size: 35rpx;" v-model="zkzno" />
					</view>
					<!-- <view class="mainpadding_top radius flexbetween margin_top6" style="background-color: rgba(51, 213, 166,.1);">
						<input type="number" placeholder="请输入验证码" style="color: #33d5a6; font-size: 40rpx;"
							placeholder-style="color: #33d5a6; font-size: 35rpx;" v-model="yzm_code" />
						<view class="xiaocheng xiaohuang textcenter" style="width: 240rpx;" @click="sendyzm"
							v-show="codetext == 1">获取验证码</view>
						<view class="xiaocheng textcenter" style="width: 240rpx;" v-show="codetext == 2">
							{{second}}s后重新获取</view>
						<view class="xiaocheng xiaohuang textcenter" style="width: 240rpx;" @click="sendyzm"
							v-show="codetext == 3">重新发送</view>
					</view> -->
				</view>
				
				<view class="paihangbang margin_top textcenter">{{paiming}}</view>
				<view class="bigbtn margin_top6"
					style="background:  #33d5a6;padding: 50rpx;box-sizing: border-box;border-radius: 10rpx;"
					@click="submit()">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				zkzno: "",
				paiming: "",
				codetext: 1,
				second: 59,
				yzm_code: '',
				
			}
		},
		methods: {
			//验证手机号
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			//发送验证码
			sendyzm() {
				let _this = this;
				if (_this.zkzno == '') {
					httpRequest.toast("请输入手机号码!")
					return;
				}
				if (!_this.isMobile(_this.zkzno)) {
					httpRequest.toast("手机号码格式错误!")
					return;
				}
				_this.codetext = 2;
				_this.second = 59;
				let timer = setInterval(function() {
					if (_this.second > 1) {
						_this.second--;
					} else {
						clearInterval(timer);
						_this.codetext = 3;
					}
				}, 1000)
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: this.zkzno,
					event: 'cxyz',
				}, false, true, false).then(res => {
					if (res.code == 1) {
						httpRequest.toast('发送成功')
					}
				})
			},
			submit() {
				if(this.zkzno==""){
					httpRequest.toast("请输入手机号")
					return false
				}
				// if(this.yzm_code==""){
				// 	httpRequest.toast("请输入验证码")
				// 	return false
				// }
				httpRequest.request('/api/schoolcl/getScoreRank', 'GET', {
					zkzno:this.zkzno,
					code:this.yzm_code
				}).then(res => {
					if(res.code==1){
						uni.navigateTo({
							url:"/pages/index/jieguo?number="+this.zkzno
						})
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style>
	.baixian {
		text-shadow: -3px 0 rgba(255, 255, 255, 1), 0 3px rgba(255, 255, 255, 1), 3px 0 rgba(255, 255, 255, 1), 0 -3px rgba(255, 255, 255, 1);
	}

	.iteminput {
		padding: 15rpx 30rpx;
		border: 5rpx solid #33d5a6;
		border-radius: 50rpx;
	}

	.content {
		background-image: url("@/static/image/bg3.jpg");
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -1;
	}

	.paihangbang {
		font-size: 40rpx;
		text-align: center;
		font-weight: bold;
		color: #ffa126;
		text-shadow: -3px 0 rgba(255, 255, 255, 1), 0 3px rgba(255, 255, 255, 1), 3px 0 rgba(255, 255, 255, 1), 0 -3px rgba(255, 255, 255, 1);
	}

	.posi1 {
		position: absolute;
		right: -120rpx;
		width: 400rpx;
		height: 400rpx;
	}

	.posi2 {
		position: relative;
		right: 100rpx;
		width: 400rpx;
		height: 400rpx;
	}
</style>